import type {
    ICellEditorComp,
    ICellEditorParams,
} from '@ag-grid-community/core';

/**
usage example:

```javascript
export const AuditStatusReverseMap = new Map([
    ['审核通过', 'approved'],
    ['审核中', 'pending'],
    ['审核不通过', 'rejected']
])

cellEditorParams: {
    labelValueMap: AuditStatusReverseMap,
},
```
 */
export class SelectionEditor implements ICellEditorComp {
    container!: any;
    
    init(params: ICellEditorParams) {
        this.container = document.createElement('select');
        this.container.classList.add('tw:size-full', 'tw:p-2');
        this.container.value = params.value;
        
        params.labelValueMap.forEach((value: any, key: any, map: any) => {
            let option = new Option(key, value);
            if (params.value == value) {
                option = new Option(key, value, true, true);
            }
            this.container.add(option);
        });
    }
    
    getValue() {
        return this.container.value;
    }

    getGui() {
        return this.container;
    }

    afterGuiAttached() {
        if ("showPicker" in HTMLSelectElement.prototype) {
            this.container.showPicker();
        }
    }
}

export class LargeTextEditor implements ICellEditorComp {
    container!: any;

    cancelChange: boolean = true;
    
    init(params: ICellEditorParams) {
        this.container = document.createElement('div');
        this.container.classList.add(
            "tw:w-[32rem]", "tw:bg-base-200",
            "tw:border", "tw:rounded",
            "tw:flex", "tw:flex-col", "tw:gap-1"
        );
        
        const textAreaElem = document.createElement("textarea");
        textAreaElem.classList.add(
            "tw:w-full", "tw:min-h-32", "tw:flex-1",
            "tw:textarea", "tw:leading-5"
        );
        textAreaElem.value = params.value;
        this.container.append(textAreaElem);

        const bottomLineLayoutElem = document.createElement("div");
        bottomLineLayoutElem.classList.add(
            'tw:flex', 'tw:flex-row-reverse'
        );
        this.container.append(bottomLineLayoutElem);

        const submitChangeButton = document.createElement("button");
        submitChangeButton.innerText = gettext("更改");
        submitChangeButton.addEventListener('click', (_event) => {
            this.cancelChange = false;
            params.stopEditing();
        });

        bottomLineLayoutElem.append(submitChangeButton);

        const cancelChangeButton = document.createElement("button");
        cancelChangeButton.innerText = gettext("取消");
        cancelChangeButton.addEventListener('click', (_event) => {
            params.stopEditing();
        });
        bottomLineLayoutElem.append(cancelChangeButton);

        const buttons = [submitChangeButton, cancelChangeButton];
        buttons.forEach((button) => {
            button.classList.add(
                'tw:w-12',
                'tw:btn', 'tw:btn-xs', 'tw:btn-outline'
            )
        });


        this.container.addEventListener('keydown', (event: any) => {
            event.stopPropagation();
        });
    }
    
    getValue() {
        return this.container.firstChild.value;
    }

    isCancelAfterEnd() {
        return this.cancelChange;
    }

    getGui() {
        return this.container;
    }

    afterGuiAttached() {
        this.container.firstChild.focus();
    }

    isPopup() { return true; }
}
